﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        button {
            color: #222;
            font-size: 20px;
            padding: 5px 20px;
            width: 120px;
        }

        #btn1 {
            position: absolute;
            top: 10px;
            left: 10px;
        }

        #btn2 {
            position: absolute;
            top: 60px;
            left: 10px;
        }

        #btn3 {
            position: absolute;
            top: 110px;
            left: 10px;
        }

        #btn4 {
            position: absolute;
            top: 160px;
            left: 10px;
        }

        #btn5 {
            position: absolute;
            top: 210px;
            left: 10px;
        }

        #btn6 {
            position: absolute;
            top: 260px;
            left: 10px;
        }

        #btn7 {
            position: absolute;
            top: 310px;
            left: 10px;
        }

        #btn8 {
            position: absolute;
            top: 360px;
            left: 10px;
        }

        #btn9 {
            position: absolute;
            top: 410px;
            left: 10px;
        }

        #btn0 {
            position: absolute;
            top: 460px;
            left: 10px;
        }
    </style>
    <script src="js/jquery.min.js"></script>

    <title>漂亮的Canvas鼠标箭头跟随动画特效</title>
</head>

<body>
<script src="/demos/googlegg.js"></script>
<canvas id="c"></canvas>
<div class="btn_left;">
    <button id="btn1">效果1</button>
    <button id="btn2">效果2</button>
    <button id="btn3">效果3</button>
    <button id="btn4">效果4</button>
    <button id="btn5">效果5</button>
    <button id="btn6">效果6</button>
    <button id="btn7">效果7</button>
    <button id="btn8">效果8</button>
    <button id="btn9">效果9</button>
    <button id="btn0">效果10</button>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var canvas = document.getElementById("c");
        var ctx = canvas.getContext("2d");
        var c = $("#c");
        var x, y, w, h, cx, cy, l;
        var y = [];
        var b = {
            n: 100,
            c: false,    //  颜色  如果是false 则是随机渐变颜色
            bc: '#000',   //  背景颜色
            r: 0.9,
            o: 0.05,
            a: 1,
            s: 20,
        }
        var bx = 0, by = 0, vx = 0, vy = 0;
        var td = 0;
        var p = 0;
        var hs = 0;
        re();
        var color, color2;
        if (b.c) {
            color2 = b.c;
        } else {
            color = Math.random() * 360;
        }

        $(window).resize(function () {
            re();
        });
        function begin() {

            if (!b.c) {
                color += .1;
                color2 = 'hsl(' + color + ',100%,80%)';
            }
            ctx.globalAlpha = 1;
            ctx.fillStyle = b.bc;
            ctx.fillRect(0, 0, w, h);
            for (var i = 0; i < y.length; i++) {
                ctx.globalAlpha = y[i].o;
                ctx.fillStyle = color2;
                ctx.beginPath();
                ctx.arc(y[i].x, y[i].y, y[i].r, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
                y[i].r += b.r;
                y[i].o -= b.o;
                if (y[i].o <= 0) {
                    y.splice(i, 1);
                    i--;
                }
                ;
            }
            window.requestAnimationFrame(begin);
        }

        function re() {
            w = window.innerWidth;
            h = window.innerHeight;
            canvas.width = w;
            canvas.height = h;
            cx = w / 2;
            cy = h / 2;
        };
        c.mousemove(function (e) {
            cx = e.pageX - c.offset().left;
            cy = e.pageY - c.offset().top;

            y.push({
                x: cx,
                y: cy,
                r: b.r,
                o: 1,
                v: 0
            });

        });
        /*c.mousedown(function(){
         c.on('mousemove',function(e){
         cx = e.pageX-c.offset().left;
         cy = e.pageY-c.offset().top;
         y.push({x:cx,y:cy,r:b.r,o:1});
         });
         c.on('mouseup',function(){
         c.off('mouseup');
         c.off('mousemove');
         c.off('moseleave');
         });
         c.on('mouseleave',function(){
         c.off('mouseup');
         c.off('mousemove');
         c.off('moseleave');
         });
         });*/

        begin();
    });
</script>

</body>
</html>

